<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>粉丝设置</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- tab选项卡 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="粉丝列表" name="粉丝列表">
          <el-row :gutter="10">
            <el-col v-for="item in fansList" :key="item.id">
              <div class="fan-container">
                <!-- 头像 -->
                 <el-avatar shape="circle" :size="80" fit="fit" :src="item.photo"></el-avatar>
                 <!-- 名字 -->
                 <div>{{item.name}}</div>
                 <!-- 关注 -->
                 <el-tag>+关注</el-tag>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="粉丝画像" name="粉丝画像">
          <echartsDemo/>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
  import echartsDemo from './components/echartsdemo.vue'
  import {
    reqFans
  } from '@/api'
  export default {
    name: 'FansIndex',
    data() {
      return {
        activeName: '粉丝画像',
        fansList: [],
      }
    },
    created() {
      this.getFansList()
    },
    mounted() {},
    methods: {
      handleClick(tab, event) {},
      async getFansList() {
        const res = await reqFans()
        this.fansList = res.data.results
        console.log(res)
      }
    },
    computed: {},
    components: {
      echartsDemo
    }
  }
</script>
<style lang="less" scope>
.fan-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  justify-content: space-between;
  height: 156px;
  width: 90px;
  border: 1px dashed #ccc;
}
</style>
